<template>
    <div class="metter">
      <p class="metterTitle">{{metterTitle}}</p>
      <div class="metterContent">
          <div class="metterDiv" v-for="(item,index) in metterdata" :key="index" >
              <MetterItem :item="item"/>
          </div>    
      </div>
    </div> 
</template>
<script>
import MetterItem from "./metterItem"
export default {
    name:"MetterList",
    data(){
        return{
            metterTitle:"",
            metterdata:[]
        }
    },
    components:{
        MetterItem
    },
    props:{
        metterData:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    methods:{
      
    },
    mounted(){
        // console.log(this.metterData.title)
        // console.log(this.metterdata)
        this.metterTitle=this.metterData.title
        this.metterdata=this.metterData.metterdata
    }
}
</script>
<style scoped lang="less">
.metter{
    color: #171818;
    overflow: hidden;
    background-color: #ffffff;
    padding: 5px;
    .metterTitle{
        padding: 5px 0;
        margin-top: 2.5rem;
        font-size: 0.9rem;
    }
    .metterContent{
        padding: 0 2.5rem 5rem 2.5rem;
        .metterDiv{
            float: left;
            // .metterImg{
            //     width: 5rem;
            //     height: 5rem;
            //     img{
            //         width: 100%;
            //     }
            // }
            // p{
            //     text-align: left;
            //     margin: 10px 0 2rem 0;
            // }
        }
        .metterDiv:nth-child(2n){
            float: right;
        }

    }
   
}
.marginRight{
    float: right;
}

</style>

